<template>
      <van-nav-bar
  
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
    <div class="ll" v-for="item in detail" :key="item.id">
      
        <img :src="item.img" alt="">
        <p>别名:{{item.nm}}</p> 
        <!-- <h3>{{item.filmAlias}}</h3>
        <h3>{{item.cat}}</h3>   -->
        <h2>￥128元</h2> 
        <div class="mm">
        <p>正品保障</p>
        <p>正品保障</p>
        <p>正品保障</p>
    </div>
    </div>
   <div class="oo">
    <h2>周边详情:</h2>
    <p>*************************************</p>
    <van-button type="danger">加入购物车</van-button>
    <van-button type="danger">购买</van-button>
   </div>
   
</template>

<script>
import { Toast } from 'vant';

    export default {
        setup() {
    const onClickLeft = () => history.back();
     const onClickIcon = () => Toast('点击图标');
    const onClickButton = () => Toast('点击按钮');
    return {
      onClickLeft,
       onClickIcon,
      onClickButton,
    };
  },
        data() {
            return {
                detail: {}
            }
        },
        mounted () {
            const id=this.$route.params.id;
            const url="/detailmovie?movieId="+id;
             this.axios.get(url)
            .then((response)=>{
                this.detail=response.data;
            })
            .catch((error)=>{
                alert(error)
            })
        },
    }
</script>

<style lang="scss" scoped>
.ll{
    width: 100%;
    background-color: #eee;
    border-bottom: 1px solid #000;
    p{
        left: 5%;
    }
    h2{
        margin-top: 5%;
        color: red;
    }
}
img{
    width: 60%;
    margin-left: 20%;
    
}
.mm{
   display: flex;
    p{
        width: 30%;
        margin-left: 3%;
    }
}
.oo{
    h2{
        text-align: left;
        margin-left: 5%;
    }
    p{
        font-size: 20px;
    }
    button{
        border-radius: 45px;
        width: 150px;
    }
}
</style>